import React from 'react';
import { Box, Typography, Paper } from '@mui/material';
import { useLocation } from 'react-router-dom';
import Layout from '../components/Layout';

const ReactAdvanced: React.FC = () => {
  const location = useLocation();
  const currentPath = location.pathname.split('/')[2] || 'hooks';

  const getContent = () => {
    switch (currentPath) {
      case 'hooks':
        return (
          <>
            <Typography variant="h4" gutterBottom>
              Hooks深入
            </Typography>
            <Typography paragraph>
              React Hooks是React
              16.8引入的新特性，它让你在不编写class的情况下使用state和其他React特性。
            </Typography>
            <Box component="section" mt={3}>
              <Typography variant="h5" gutterBottom>
                自定义Hook
              </Typography>
              <Typography paragraph>
                通过自定义Hook，可以将组件逻辑提取到可重用的函数中：
              </Typography>
              <Paper
                sx={{
                  p: 2,
                  backgroundColor: '#f5f5f5',
                  '& pre': {
                    margin: 0,
                    fontFamily: 'monospace',
                    fontSize: '0.9rem',
                  },
                }}
              >
                <pre>{`import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}`}</pre>
              </Paper>
              <Typography variant="h5" gutterBottom sx={{ mt: 3 }}>
                使用自定义Hook
              </Typography>
              <Paper
                sx={{
                  p: 2,
                  backgroundColor: '#f5f5f5',
                  '& pre': {
                    margin: 0,
                    fontFamily: 'monospace',
                    fontSize: '0.9rem',
                  },
                }}
              >
                <pre>{`function ResponsiveComponent() {
  const windowSize = useWindowSize();
  
  return (
    <div>
      Window size: {windowSize.width} x {windowSize.height}
    </div>
  );
}`}</pre>
              </Paper>
            </Box>
          </>
        );
      // 可以添加其他路径的内容
      default:
        return (
          <Typography variant="h5" color="textSecondary">
            正在建设中...
          </Typography>
        );
    }
  };

  return (
    <Layout>
      <Box sx={{ maxWidth: '800px', margin: '0 auto', p: 3 }}>{getContent()}</Box>
    </Layout>
  );
};

export default ReactAdvanced;
